<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=0.9">
    <title>上架商品列表</title>
    <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootoast.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        .my-container {
            height: 100%;
        }

        .table .text {
            /* padding-top: 10px !important; */
        }

        .table th, .table td {
            text-align: center;
        }

        .table td {
            display: table-cell !important;
            vertical-align: middle !important;
        }

        .footer {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0px;
            color: #666;
            text-align: center;
        }
    </style>
    <!-- 引入jquery.js-->
    <script src="./static/bootstrap-3.4.1/js/jquery-3.6.0.min.js"></script>
    <!-- 引入bootstrap.js-->
    <script src="./static/bootstrap-3.4.1/js/bootstrap.js"></script>
    <script src="./static/bootstrap-3.4.1/js/bootoast.js"></script>
    <script>
        // 创建一个全局的keywords，分页时候要用
        var keywords = "''"
        /**
         * dom加载完成之后，自动执行
         */
        $(function () {
            let adminHome = new AdminHome();
            // 初始化模态框
            adminHome.initModal();
            // 获取类别列表数据
            adminHome.queryAll(null);
            // 初始化点击事件
            adminHome.click();

        })

        class AdminHome {
            constructor() {
            }

            /**
             * 根据关键字从服务端获取类别列表信息
             * @param keywords 关键字
             * @param currentPage 当前页
             */
            queryAll(keywords,currentPage) {
                // 处理关键字
                if (!keywords) {
                    keywords = "''";// 这里需要传递一个单引号
                }
                // 处理当前页
                if(!currentPage){
                    currentPage = 1;// 如果当前页没有设置，就默认第1页
                }
                // 为了防止添加的数据重复，所以需要清空之前添加的数据
                $(".table tbody").empty();// 每次先清空表格数据，再更新
                $(".pagination").empty();// 每次先清空分页条数据，再更新
                // 我们在前端访问服务端接口使用jQuery提供的ajax
                $.ajax({
                    type: 'GET',// 提交方式，跟接口规定的一致
                    url: `/pet/goods/findDownAll/${keywords}/${currentPage}`,// url服务端的接口地址
                    cache: false,// 不启用缓存
                    dataType: 'json',// 期望后端返回的数据的类型
                    success: function (res) {// success,成功响应后自动执行，res封装后端响应回来的信息
                        console.log("返回商品列表信息", res)
                        if (res.code == 1) {// 数据查询成功
                            // 判断后端是否传过来列表数据
                            if (res.result && res.result.list.length > 0) {// 有数据
                                // 遍历类别数据
                                for (let goods of res.result.list) {
                                    $(`
                                      <tr>
                                        <td class="text">${goods.goodsId}</td>
                                        <td class="text">${goods.goodsName}</td>
                                        <td class="text">${goods.type.typeName}</td>
<!--                                        <td class="text">${goods.goodsPic}</td>-->
                                        <td class="text">
                                             <img src="${goods.goodsPic}" style="width:140px;height:80px;"/>
                                        </td>
                                        <td class="text">${goods.depict}</td>
                                        <td class="text">${goods.price}</td>
                                        <td class="text">${goods.productionData}</td>
                                        <td class="text" id="status-${goods.goodsId}"></td>
                                        <td class="text" id="btn-${goods.goodsId}">
                                           <button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal" data-goods-id=${goods.goodsId}
                                    data-goods-name=${goods.goodsName} data-goods-pic=${goods.pic} data-goods-depict=${goods.depict} data-type-name=${goods.type.typeName}
                                     data-goods-price=${goods.price} data-status=${goods.status}>编辑</button>
                                            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal2" data-goods-id=${goods.goodsId}>删除</button>
                                        </td>
                                      </tr>
                                    `).appendTo($(".table tbody"))
                                    console.log("goods.status:",goods.status)
                                    // 处理上架状态显示及按钮
                                    if(goods.status==0){
                                        $(`#status-${goods.goodsId}`).append($(`<span class="label label-default">未上架</span>`))
                                        $(`#btn-${goods.goodsId}`).append($(` <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal3" data-goods-id=${goods.goodsId}><i class="glyphicon glyphicon-eye-open"></i>&nbsp;上架</button>`))
                                    }else if(goods.status==1){
                                        $(`#status-${goods.goodsId}`).append($(`<span class="label label-success">已上架</span>`))
                                        $(`#btn-${goods.goodsId}`).append($(` <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal4" data-goods-id=${goods.goodsId}><i class="glyphicon glyphicon-eye-close"></i>&nbsp;下架</button>`))
                                    }else if(goods.status==2){
                                        $(`#status-${goods.goodsId}`).append($(`<span class="label label-danger">已下架</span>`))
                                        $(`#btn-${goods.goodsId}`).append($(` <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal3" data-goods-id=${goods.goodsId}><i class="glyphicon glyphicon-eye-close"></i>&nbsp;上架</button>`))
                                    }
                                }
                                // 处理分页
                                if(res.result.navigatepageNums && res.result.navigatepageNums.length>0){
                                    // 遍历数组，获取页码
                                    // 上一页
                                    $(`<li>
                                         <a href="javascript:void(0)" rel="${res.result.hasPreviousPage?res.result.prePage:1}" aria-label="Previous" onclick="changePage(this)">
                                             <span aria-hidden="true">&laquo;</span>
                                         </a>
                                    </li>`).appendTo($(".pagination"))
                                    // 数字页
                                    for(let pageNum of res.result.navigatepageNums){
                                        console.log("页码：",pageNum)
                                        // 动态添加li到ul
                                        $(`<li><a href="javascript:void(0)" rel="${pageNum}" onclick="changePage(this)">${pageNum}</a></li>`).appendTo($(".pagination"))
                                    }
                                    // 下一页
                                    $(`<li>
                                         <a href="javascript:void(0)" aria-label="Next" rel="${res.result.hasNextPage?res.result.nextPage:res.result.pages}" onclick="changePage(this)">
                                             <span aria-hidden="true">&raquo;</span>
                                         </a>
                                    </li>`).appendTo($(".pagination"))
                                    // 当前第x页，共n页
                                    $(`<li>
                                         <span aria-hidden="true">当前第${res.result.pageNum}页，共${res.result.pages}页</span>
                                    </li>`).appendTo($(".pagination"))
                                }
                            } else {// 无数据
                                $(`
                                  <tr>
                                      <td colspan="9" style="text-align: center;border:none;padding: 150px 0;">当前没有查询到数据！</td>
                                  </tr>
                                `).appendTo($(".table tbody"))
                            }
                        } else {// 数据查询失败

                        }
                    },
                    error: function (err) {
                        console.log("Error=>", err);
                    }
                })
            }

            /**
             * 管理所有的点击事件
             */
            click() {
                // 点击事件中，无法获取到对象中的this
                let that = this;
                $("#searchBtn").click(function () {
                    // 获取搜索输入框中内容
                    keywords = $("#searchValue").val();
                    // 访问服务器
                    that.queryAll(keywords);

                })
                // 保存表单
                $("#save-btn").click(function () {
                    that.save();
                })
                // 删除商品
                $("#del-btn").click(function () {
                    let goodsId = $("#userId2").val();
                    if (goodsId) {
                        // 提交表单
                        $.ajax({
                            type: 'post',// 提交方式 post
                            url: `/pet/goods/delete/${goodsId}`,
                            cache: false,// 不启用缓存
                            dataType: 'json',// 期望服务器响应的数据类型 json
                            success: function (result) {// 响应成功就会自动执行该方法，result中封装的是响应的结果
                                console.log(result);
                                // 提示
                                if(result.code==1){
                                    bootoast({
                                        message: result.msg,
                                        type: 'success',
                                        position:'top',
                                        timeout:2
                                    });
                                }else{
                                    bootoast({
                                        message: result.msg,
                                        type: 'danger',
                                        position:'top',
                                        timeout:2
                                    });
                                }
                                //setTimeout(()=>{
                                // 更新列表
                                that.queryAll(null);
                                // 关闭修改模态框
                                $('#exampleModal2').modal('hide')
                                //},2000)

                            },
                            error: function (error) {// 响应失败就会自动执行该方法，error中封装的是错误信息
                                // 提示
                                bootoast({
                                    message: '服务器请求错误！',
                                    type: 'danger',
                                    position:'top',
                                    timeout:2
                                });
                            }

                        })
                    }

                });
                // // 上架商品
                // $("#del-btn3").click(function () {
                //     let goodsId = $("#userId3").val();
                //     if (goodsId) {
                //         // 提交表单
                //         $.ajax({
                //             type: 'get',// 提交方式 post
                //             url: `/pet/goods/updateStatus/${goodsId}/1`,
                //             cache: false,// 不启用缓存
                //             dataType: 'json',// 期望服务器响应的数据类型 json
                //             success: function (result) {// 响应成功就会自动执行该方法，result中封装的是响应的结果
                //                 console.log(result);
                //                 // 提示
                //                 if(result.code==1){
                //                     bootoast({
                //                         message: result.msg,
                //                         type: 'success',
                //                         position:'top',
                //                         timeout:2
                //                     });
                //                 }else{
                //                     bootoast({
                //                         message: result.msg,
                //                         type: 'danger',
                //                         position:'top',
                //                         timeout:2
                //                     });
                //                 }
                //                 //setTimeout(()=>{
                //                 // 更新列表
                //                 that.queryAll(null);
                //                 // 关闭修改模态框
                //                 $('#exampleModal3').modal('hide')
                //                 //},2000)
                //
                //             },
                //             error: function (error) {// 响应失败就会自动执行该方法，error中封装的是错误信息
                //                 // 提示
                //                 bootoast({
                //                     message: '服务器请求错误！',
                //                     type: 'danger',
                //                     position:'top',
                //                     timeout:2
                //                 });
                //             }
                //         })
                //     }
                // });
                // 下架商品
                $("#del-btn4").click(function () {
                    let goodsId = $("#userId4").val();
                    if (goodsId) {
                        // 提交表单
                        $.ajax({
                            type: 'get',// 提交方式 post
                            url: `/pet/goods/updateStatus/${goodsId}/2`,
                            cache: false,// 不启用缓存
                            dataType: 'json',// 期望服务器响应的数据类型 json
                            success: function (result) {// 响应成功就会自动执行该方法，result中封装的是响应的结果
                                console.log(result);
                                // 提示
                                if(result.code==1){
                                    bootoast({
                                        message: result.msg,
                                        type: 'success',
                                        position:'top',
                                        timeout:2
                                    });
                                }else{
                                    bootoast({
                                        message: result.msg,
                                        type: 'danger',
                                        position:'top',
                                        timeout:2
                                    });
                                }
                                //setTimeout(()=>{
                                // 更新列表
                                that.queryAll(null);
                                // 关闭修改模态框
                                $('#exampleModal4').modal('hide')
                                //},2000)
                            },
                            error: function (error) {// 响应失败就会自动执行该方法，error中封装的是错误信息
                                // 提示
                                bootoast({
                                    message: '服务器请求错误！',
                                    type: 'danger',
                                    position:'top',
                                    timeout:2
                                });
                            }
                        })
                    }
                });
            }

            /**
             * 修改图书类别信息
             * @returns {boolean}
             */
            save() {
                let that = this;
                // 非空校验
                var goodsId = $("#goodsId").val();
                var goodsName = $("#goodsName").val();
                var goodsDepict = $("#goodsDepict").val();
                var goodsTypeName = $("#goodsTypeName").val();
                var goodsPrice = $("#goodsPrice").val();

                // 进行非空校验
                if (!goodsId || goodsId === '') {
                    bootoast({
                        message: '商品编号不能为空！',
                        type: 'danger',
                        position:'top',
                        timeout:2
                    });
                    return false;
                }
                if (!goodsName || goodsName === '') {
                    bootoast({
                        message: '商品名称不能为空！',
                        type: 'danger',
                        position:'top',
                        timeout:2
                    });
                    return false;
                }
                if (!goodsDepict || goodsDepict === '') {
                    bootoast({
                        message: '商品描述不能为空！',
                        type: 'danger',
                        position:'top',
                        timeout:2
                    });
                    return false;
                }
                if (!goodsTypeName || goodsTypeName === '') {
                    bootoast({
                        message: '商品类别不能为空！',
                        type: 'danger',
                        position:'top',
                        timeout:2
                    });
                    return false;
                }
                if (!goodsPrice || goodsPrice === '') {
                    bootoast({
                        message: '商品价格不能为空！',
                        type: 'danger',
                        position:'top',
                        timeout:2
                    });
                    return false;
                }
                // 提交表单
                $.ajax({
                    type: 'post',// 提交方式 post
                    url: $("#myForm").attr("action"),// /shop/goods/update
                    cache: false,// 不启用缓存
                    data: `goodsId=${goodsId}&goodsName=${goodsName}&depict=${goodsDepict}&goodsTypeName=${goodsTypeName}&goodsPrice=${goodsPrice}`,
                    dataType: 'json',// 期望服务器响应的数据类型 json
                    success: function (result) {// 响应成功就会自动执行该方法，result中封装的是响应的结果
                        console.log(result);
                        // 提示
                        bootoast({
                            message: result.msg,
                            type: 'success',
                            position:'top',
                            timeout:2
                        });
                        // 更新列表
                        that.queryAll(null);
                        // 关闭修改模态框
                        $('#exampleModal').modal('hide')
                    },
                    error: function (error) {// 响应失败就会自动执行该方法，error中封装的是错误信息
                        // 提示
                        bootoast({
                            message: '服务器请求错误！',
                            type: 'danger',
                            position:'top',
                            timeout:2
                        });
                    }

                })
                return true;
            }

            /**
             * 管理模态框
             */
            initModal() {
                // 处理修改模态框
                $('#exampleModal').on('show.bs.modal', function (event) {
                    // 获取修改按钮
                    var button = $(event.relatedTarget) // Button that triggered the modal
                    // 接收传递的数据（接收编辑按钮上，通过data-传递的数据）
                    var goodsId = button.data('goods-id');// data()中只能是小写，单词之间使用-分隔
                    var goodsName = button.data('goods-name');
                    var goodsPic = button.data('goods-pic');
                    var goodsDepict = button.data('goods-depict');
                    var goodsTypeName = button.data('type-name');
                    var goodsPrice = button.data('goods-price')

                    var modal = $(this)
                    // 绑定数据(将编辑按钮上携带的数据绑定到弹出框)
                    modal.find('.modal-body #goodsId').val(goodsId)
                    modal.find('.modal-body #goodsName').val(goodsName)
                    modal.find('.modal-body #goodsPic').val(goodsPic)
                    modal.find('.modal-body #goodsDepict').val(goodsDepict)
                    modal.find('.modal-body #goodsTypeName').val(goodsTypeName)
                    modal.find('.modal-body #goodsPrice').val(goodsPrice)

                })
                // 处理删除模态框
                // 处理模态框
                $('#exampleModal2').on('show.bs.modal', function (event) {
                    // 获取修改按钮
                    var button = $(event.relatedTarget) // Button that triggered the modal
                    // 接收传递的数据
                    var goodsId = button.data('goods-id');
                    var modal = $(this)
                    // 绑定数据
                    modal.find('.modal-body #userId2').val(goodsId);
                })

                // 处理上架模态框
                // 处理模态框
                // $('#exampleModal3').on('show.bs.modal', function (event) {
                //     // 获取修改按钮
                //     var button = $(event.relatedTarget) // Button that triggered the modal
                //     // 接收传递的数据
                //     var goodsId = button.data('goods-id');
                //     var modal = $(this)
                //     // 绑定数据
                //     modal.find('.modal-body #userId3').val(goodsId);
                // })

                // 处理下架模态框
                // 处理模态框
                $('#exampleModal4').on('show.bs.modal', function (event) {
                    // 获取修改按钮
                    var button = $(event.relatedTarget) // Button that triggered the modal
                    // 接收传递的数据
                    var goodsId = button.data('goods-id');
                    var modal = $(this)
                    // 绑定数据
                    modal.find('.modal-body #userId4').val(goodsId);
                })
            }

        }
        // 分页条跳转页面
        function changePage(e){
            console.log($(e).attr("rel"))// 获取按钮上携带的页码
            new AdminHome().queryAll(keywords,$(e).attr("rel"))
        }
    </script>
</head>

<body>
<div class="container-fluid my-container">
    <!-- 页头 -->
    <ol class="breadcrumb" style="margin-top:5px;">
        <li><a href="#">主页</a></li>
        <li><a href="#">上下架管理</a></li>
        <li class="active">下架管理列表</li>
    </ol>
    <!-- 检索框 -->
    <form class="form-inline">
        <div class="form-group">
            <input type="text" class="form-control" id="searchValue" placeholder="请输入关键字">
        </div>
        <button type="button" class="btn btn-primary" id="searchBtn">搜索</button>
        <!--        <button type="button" class="btn btn-danger">批量删除</button>-->
    </form>
    <!-- 内容 -->
    <div class="panel panel-default" style="margin-top: 10px;">
        <div class="panel-heading">
            <h3 class="panel-title">操作面板</h3>
        </div>
        <div class="panel-body">
            <!-- 表格 -->
            <table class="table table-hover table-condensed table-bordered table-striped">
                <thead>
                <!-- 标题行 -->
                <tr>
                    <th>编号</th>
                    <th>商品名称</th>
                    <th>商品类别</th>
                    <th>商品图片</th>
                    <th>商品介绍</th>
                    <th>商品价格</th>
                    <th>生产日期</th>
                    <th>上架状态</th>
                    <th width="250">操作</th>
                </tr>
                </thead>
                <tbody>
                <!-- 内容行 -->
                </tbody>
            </table>
            <!-- 分页组件 -->
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <!-- 动态生成分页按钮 -->
                </ul>
            </nav>
        </div>
    </div>


    <!-- 尾部 -->
<!--    <div class="footer">技术支持:计科B1902第三组</div>-->
</div>
<!-- 模态框 类别信息展示与修改-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel"
                    style="border-left: 5px solid dodgerblue;padding-left: 10px;">编辑商品信息</h4>
            </div>
            <div class="modal-body">
                <!-- 表单 -->
                <form action="/pet/goods/update" method="post" id="myForm">
                    <!-- 图书编号只能看，不能改，所以使用readonly-->
                    <div class="form-group">
                        <label for="goodsId">编<span
                                style="color:transparent;user-select: none;">隐藏</span>号：</label>
                        <input type="text" class="form-control" name="goodsId" id="goodsId" readonly>
                    </div>
                    <!--修改商品图片 -->
<!--                    <form enctype="multipart/form-data" class="myform">-->
                        <label >上传图片</label>
                        <div class="file-loading">
                            <input id="uploadFile " name="file" type="file"  data-browse-on-zone-click="true" >
                        </div>
<!--                    </form>-->
                    <!-- 图书类别名称 -->
                    <div class="form-group">
                        <label for="goodsName">商品名称：</label>
                        <input type="text" class="form-control" name="goodsName" id="goodsName" placeholder="请输入商品名称">
                    </div>
                    <!-- 图书类别描述-->
                    <div class="form-group">
                        <label for="goodsDepict">商品描述：</label>
                        <textarea class="form-control" rows="3" name="goodsDepict" id="goodsDepict" placeholder="请输入商品描述"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="goodsTypeName">所属类别：</label>
                        <textarea class="form-control" rows="2" name="goodsTypeName" id="goodsTypeName" placeholder="请输入类别描述"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="goodsPrice">商品价格：</label>
                        <textarea class="form-control" rows="1" name="goodsPrice" id="goodsPrice" placeholder="请输入类别描述"></textarea>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="save-btn">保存</button>
            </div>
        </div>
    </div>
</div>
<!--删除元素模态框-->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel2"
                    style="border-left: 5px solid dodgerblue;padding-left: 10px;">温馨提示</h4>
            </div>
            <div class="modal-body">
                确定删除当前类别？
                <input type="hidden" id="userId2">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="del-btn">确认</button>
            </div>
        </div>
    </div>
</div>
<!--&lt;!&ndash;商品上架模态框&ndash;&gt;-->
<!--<div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">-->
<!--    <div class="modal-dialog" role="document">-->
<!--        <div class="modal-content">-->
<!--            <div class="modal-header">-->
<!--                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span-->
<!--                        aria-hidden="true">&times;</span></button>-->
<!--                <h4 class="modal-title" id="exampleModalLabel3"-->
<!--                    style="border-left: 5px solid dodgerblue;padding-left: 10px;">温馨提示</h4>-->
<!--            </div>-->
<!--            <div class="modal-body">-->
<!--                确定上架当前商品？-->
<!--                <input type="hidden" id="userId3">-->
<!--            </div>-->
<!--            <div class="modal-footer">-->
<!--                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>-->
<!--                <button type="button" class="btn btn-primary" id="del-btn3">确认</button>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->
<!--商品下架模态框-->
<div class="modal fade" id="exampleModal4" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel4"
                    style="border-left: 5px solid dodgerblue;padding-left: 10px;">温馨提示</h4>
            </div>
            <div class="modal-body">
                确定下架当前商品？
                <input type="hidden" id="userId4">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="del-btn4">确认</button>
            </div>
        </div>
    </div>
</div>
<script>

</script>
</body>

</html>